
<template>
<div class="login" :style="'background-image:url('+ Background +')'">
  <el-form ref="loginRef" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
    <h3 class="title" >XXX 后台管理系统</h3>
    <el-form-item prop="username" label="帐号：" label-width="65px" >
      <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" >
<!--        <template #prefix><svg-icon name="user" color="red" size='15' /></template>-->
        <template #prefix> <svg-icon  icon="user" class="el-input__icon input-icon" /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码：" label-width="65px">
        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码">
          <template #prefix><svg-icon icon="password" size="15"/></template>
        </el-input>
    </el-form-item>
    <el-form-item prop="code" label="验证码" label-width="65px">
    <el-input v-model="loginForm.code" type="text" autocomplete="off" placeholder="验证码" style="width:63%" @keyup.enter.native="handleLogin"></el-input>
     <div class="login-code"> <img :src="codeUrl" @click="getCode"></div>
    </el-form-item>
    <el-checkbox label="记住我" v-model="loginForm.rememberMe" style="margin: 0 0 25px 0"></el-checkbox>
    <el-form-item prop="button" style="width: 100%">
      <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin" style="width: 100%">
        <span v-if="!loading">登录</span>
        <span v-else>登陆中...</span></el-button>
    </el-form-item>
  </el-form>
</div>

</template>

<script>
import {getCodeImage} from '@/api/login'
import backImage from '@/assets/background.jpeg'
import {encrypt} from "@/utils/rsaEncrypt";
import Config from '@/settings'
import Cookies from 'js-cookie'

export default {
  name: "login",
/*  setup(){
    const a =1;
    return{
      a
    }
  },*/
  created() {
    this.getCode()
    this.getCookie()
  },

  data() {
    return{
      Background: backImage,
      codeUrl : '',
      loading: false,
      cookiePass:'',
      loginForm:{
        username:"admin",
        password:"",
        code:"",
        uuid:"",
        rememberMe:false
      },
      loginRules:{
        username: [{required:true,trigger:'blur',message:'用戶名不能为空'}],
        password: [{required:true,trigger:'blur',message:'密码不能为空'}],
        code:[{required:true,trigger:'blur',message:'验证码不能为空'}]
      }
    }
  },
  methods:{
    handleLogin() {
      //通过$refs得到loginRef表单
      this.$refs.loginRef.validate(validate => {
        if (validate) {
          const user= {
            username: this.loginForm.username,
            password: this.loginForm.password,
            uuid: this.loginForm.uuid,
            code: this.loginForm.code,
            rememberMe: this.loginForm.rememberMe
          }
          if(user.password!== this.cookiePass) {
            user.password=encrypt(user.password)
          }
          if(user.rememberMe){
            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
          }else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          this.loading=true
          this.$store.dispatch('loginAction', user).then(res=>{
            this.$router.push("/")
          }).catch(()=>{
            this.loading = false
            this.getCode()
          })

        }else {
          alert("请完善你的信息！")
        }
      })
    },
    getCode(){
    getCodeImage().then(  async res=>{
          this.codeUrl = res.img
          this.loginForm.uuid=res.uuid
        }
    )
    },
    getCookie(){
      const username = Cookies.get('username')
      let password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === undefined ? '' : password
      password = password === undefined ? this.loginForm.password : password
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password,
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        code: ''
      }
    }

  }
}

</script>

<style lang="scss" scoped>
.login{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  .title{
    margin: 20px auto 35px 0;
    text-align:center;
  }
}
.login-form{
  border-radius: 6px;
  background: #ffffff;
  width: 380px;
  padding: 20px 25px 5px 25px;
      .el-input {
      height: 38px;
      input {
        height: 38px;
      }
        .input-icon{
          height: 39px;width: 14px;margin-left: 2px;
        }
  }
  .login-code {
    width: 33%;
    display: inline-block;
    height: 38px;
    float: right;
    img{
      cursor: pointer;
      vertical-align:middle
    }
  }

}
</style>
